<script setup>
import ChoiceYear from '@/views/performance/components/ChoiceYear.vue';
import { updateImageColors, preloadImage } from '@/utils/tool.js';
import { useRouter } from 'vue-router';
import { getPerformanceResource } from '@/api/performance.js'
import VLoading from "@/components/VLoading.vue";
import { stringify, parse } from 'flatted';


const router = useRouter()
const cxt = getCurrentInstance();
const bus = cxt.appContext.config.globalProperties.$bus;
const performanceData = reactive([])
const showInfo = ref({})
const bgColorsString = ref('');
const loading = ref(true)

// 模板打开点击事件
const showTemplate = ref(false)
const openTemplate = (() => {
  showTemplate.value = true
})

// 观看视频点击事件
const watchMovie = (() => {
  const videoData = stringify(showInfo); // 注意使用.value来获取ref的值  
  router.push({ path: '/Movie', query: { videoData } });
});

onMounted(async () => {

  await getPerformanceResource()
    .then(res => {
      if (res.status === 200) {
        performanceData.push(...res.data.data.map(item => item.attributes.Performance));
        showInfo.value = performanceData[0]
        performanceData.forEach(item => {
          preloadImage(item.bgImg)
          preloadImage(item.mediumImg)
        })
      }
      else alert('数据请求错误，请联系管理员')
    })
    .catch(err => {
      console.log(err)
    })

  bgColorsString.value = await updateImageColors(showInfo.value.bgImg);
  bgColorsString.value.join(', ')

  bus.on('Performance', async (val) => {
    if (performanceData.length) {
      const info = performanceData.find(item => item.id == val.year);
      if (info) {
        Object.assign(showInfo.value, info);
        bgColorsString.value = await updateImageColors(showInfo.value.bgImg);
        bgColorsString.value.join(', ')
        showTemplate.value = false
      }
    }
  });

  bus.on('closeTemplate', (() => {
    showTemplate.value = false
  }))

  loading.value = false
});

onBeforeUnmount(() => {
  bus.off('Performance');
  bus.off('closeTemplate');
});
</script>

<template>
  <template v-if="loading">
    <VLoading :isLoading=loading></VLoading>

  </template>
  <template v-else>

    <body v-if="!showTemplate">
      <div class="BGImg" :style="{ background: 'linear-gradient(' + bgColorsString + ')' }" />
      <div class="banner">
        <!-- <TimeLine /> -->
        <img class="animate__animated animate__bounceIn" @click="openTemplate"
          src="https://kanekikeh.online/A/icon/happyTong.png">
      </div>
      <div class="content">
        <div class="First-img" :style="{ backgroundImage: 'url(' + showInfo.mediumImg + ')' }" @click="watchMovie" />
        <div class="lateral-box">
          <template v-for="item in showInfo.imageText" :key="item.id">
            <div class="box-item">
              <template v-if="(item.id % 2) === 0">
                <!-- 偶数 -->
                <div class="odd-img" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }" @click="watchMovie" />
              </template>

              <template v-else>
                <!-- 奇数 -->
                <div class="even-div">
                  <text class="title">{{ item.title }}</text>
                  <text class="introduce">{{ item.introduce }}</text>
                  <div class="foot-group">
                    <text>Watch More</text>
                    <img :src="item.arrow" @click="watchMovie" />
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
      </div>
    </body>

    <template v-if="showTemplate">
      <ChoiceYear />
    </template>
  </template>

</template>

<style scoped lang="scss">
// 定义弹性布局混合
@mixin flex($layout, $isCenter) {
  display: flex;
  flex-direction: $layout;
  justify-content: $isCenter;
  align-items: $isCenter;
  @content
}

;

// 定义媒体查询参数
$breakpoints: (
  'phone':320px,
  'pad':481px,
  'notebook':769px,
  'desktop':1025px,
  'tv':1201px
);

// 定义媒体查询混合
@mixin respondTo($breakname) {
  $bp: map-get($breakpoints, $breakname);

  @media(min-width:$bp) {
    @content
  }
}

;

// 定义展示的图文尺寸混合
@mixin boxSize() {
  height: 31.25vh;
  width: calc(63vw / 3);
  min-width: calc(63vw / 3);
  max-width: calc(63vw / 3);
}

body {
  width: 100vw;
  @include flex(column, center);
  font-family: STSong;
  position: relative;
}

.BGImg {
  width: 100%;
  height: 120%;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
}


.banner {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    margin-top: 70px; // 这里是Navigator的高度 感觉不是理想的写法 后续在改改
    height: 20vh; // 这里后续需要重新改一下图片 然后调整高度
  }

  @include flex(column, none) {
    width: 95vw;
    background-image: url('/src/assets/images/title.png');
    background-position: 60%;
    background-size: 65%;
    z-index: 2;
    position: relative;
  }

  & img {
    width: 15vh;
    height: 18vh;
    position: absolute;
    top: 5%;
    right: 3%;
    cursor: pointer;
  }
}


.content {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    width: 95vw;
    height: 63.5vh;
  }

  @include flex(row, center);
  margin-top: 5vh;
  z-index: 2;
}


.First-img {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    height: 63.5vh;
  }

  width: 27.9vw;
  margin-right: 0.5vw;
  border-radius: 20px;
  transition: all 0.5s ease 0s;
  background-position: center 90%;
  background-size: cover;
  z-index: 2;

}

.First-img:hover {
  cursor: pointer;
  // animation: blowUp 0.5s ease-in-out forwards;
  transition: all 0.5s ease 0s;
  transform: scale(1.1);
  z-index: 999;
}

.lateral-box {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    height: 63.5vh;
  }

  @include flex(row, center) {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  width: 65.1vw;
  border-radius: 20px;
  z-index: 2;

}

.box-item {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    @include boxSize()
  }

  flex: 1;
  border-radius: 20px;
  margin: 0 0.5vw 1vh 0;
  z-index: 4;

  &:nth-child(3n) {
    // 去除第3n个的margin-right
    margin-right: 0;
  }

}

.odd-img {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    @include boxSize()
  }

  z-index: 2;
  border-radius: 20px;
  border: 1px solid #ccc;
  transition: all 0.5s ease 0s;
  background-position: center;
  background-size: cover;
}

.odd-img:hover {
  cursor: pointer;
  transition: all 0.5s ease 0s;
  transform: scale(1.1);
  z-index: 999;
}

.even-div {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    @include boxSize()
  }

  @include flex(column, flex-start) {
    border-radius: 20px;
    padding: 1vh;
    border: 1px solid #cccc;
    background-color: white;
    z-index: 2;

  }
}

.title {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    font-size: 1.3em;
  }

  font-weight: 600;
  letter-spacing: 3px;

}

.introduce {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    font-size: 0.8em;
  }

  text-align: justify;
  margin-right: 1vw;
  margin-top: 5px;
  font-weight: 300;

  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.even-div div {
  margin-top: auto;
  z-index: 2;

}

.foot-group {
  @include flex(row, center) {
    width: 100%;
  }
}

.foot-group img {
  @include respondTo('phone') {}

  @include respondTo('pad') {}

  @include respondTo('notebook') {
    width: 4vh;
    height: 4vh;
  }

  margin-left: auto;
  margin-right: 1vw;
  border-radius: 100%;
  border: 1px solid #ababab;
  transition: all 0.5s ease 0s;
}

.foot-group img:hover {
  cursor: pointer;
  animation-play-state: 'paused';
  transition: all 0.5s ease 0s;
  transform: scale(1.5);
}
</style>